<template>
  <div class="container">
    <ul>
      <router-link v-for="(item,index) in listsData" :key="index" tag="li" :to="{name:'musicplay',params:{songid:item.song_id}}">
        {{ item.title }}
      </router-link>
    </ul>
  </div>
</template>

<script>
  export default {
    name:'list',
    data(){
      return{
        listsData:[]
      }
    },
    props:{
      ting_uid:{
        type:[String,Number],
        default:0
      },
      songid:{
        type:[String,Number],
        default:0
      }
    },
    mounted(){
      const artistsUrl = this.HOST + '/v1/restserver/ting?method=baidu.ting.artist.getSongList&tinguid=' + this.ting_uid + '&limits=12&use_cluster=1&order=2'
        this.$axios.get(artistsUrl)
          .then(res => {
            this.listsData = res.data.songlist
          })
          .catch(error => {
            console.log(error)
          })
    }
  }
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
  margin: 0 auto
}

ul{
  margin-top: 40px
}

ul li{
  list-style: none;
  text-align: center;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>